<template>
    <div style="padding: 10px;">
        <a-row v-if="!readOnly" v-for="propertiesGroup in propertiesGroups">
            <a-divider orientation="left">{{ propertiesGroup.name }}</a-divider>
            <a-col :span="12" v-for="osProperties in (propertiesGroup.osPropertiesDefList)">
                <a-form-item :labelCol="labelCol" :wrapperCol1="wrapperCol1" :label="osProperties.name">
                    <a-input v-if="osProperties.ctltype=='text'" v-model="osProperties.propertyValue"
                             :placeholder="osProperties.name"/>
                    <a-radio-group v-if="osProperties.ctltype=='radio'" v-model="osProperties.propertyValue"
                                   :options="optionObj[osProperties.pkId]"></a-radio-group>
                    <a-select style="width: 100%;" v-if="osProperties.ctltype=='select'"
                              v-model="osProperties.propertyValue" :options="optionObj[osProperties.pkId]"
                              allowClear></a-select>
                    <a-date-picker v-if="osProperties.ctltype=='date'" v-model="osProperties.propertyValue"
                                   :format="format"/>
                </a-form-item>
            </a-col>
        </a-row>

        <a-row v-if="readOnly" v-for="propertiesGroup in propertiesGroups">
            <a-divider orientation="left">{{ propertiesGroup.name }}</a-divider>
            <a-col :span="12" v-for="osProperties in (propertiesGroup.osPropertiesDefList)">
                <a-form-item :labelCol="labelCol" :wrapperCol1="wrapperCol1" :label="osProperties.name">
                    <span
                        v-if="osProperties.ctltype=='select' || osProperties.ctltype=='radio'">{{ getPropertyText(osProperties.propertyValue, osProperties) }}</span>
                    <span v-else>{{ osProperties.propertyValue }}</span>
                </a-form-item>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import moment from 'moment';
import {BaseForm, Util} from "@lowcode/jpaas-common-lib"
import SysDicApi from "@/api/system/core/sysDic";

export default {
    name: "ExtendedProperties",
    mixins: [BaseForm],
    props: {
        propertiesGroups: {
            type: Array,
            default: []
        },
        readOnly: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            format: "YYYY-MM-DD",
            //下拉与单选的选项
            optionObj:{},
            //缓存数据字典
            dicData:{}
        }
    },
    created() {
    },
    methods: {
        getOptions(osProperties) {
            var extJson = JSON.parse(osProperties.extJson);
            if(!extJson || !extJson.from || extJson.from=="custom"){
                var options = [];
                for (var i = 0; i < extJson.setting.length; i++) {
                    options.push({
                        label: extJson.setting[i].name,
                        key: extJson.setting[i].value,
                        value: extJson.setting[i].value
                    })
                }
                this.$set(this.optionObj,osProperties.pkId,options);
            }else {
                if(this.dicData[extJson.setting]){
                    this.$set(this.optionObj,osProperties.pkId,this.dicData[extJson.setting]);
                }
                SysDicApi.getByAlias(extJson.setting,true).then(res=>{
                    let ary=res.map(item=>{
                        return {value:item.value,label:item.name,key: item.value};
                    })
                    this.dicData[extJson.setting]=ary;
                    this.$set(this.optionObj,osProperties.pkId,ary);
                });
            }
        },
        //只读情况下
        getPropertyText(value, osProperties) {
            var options = this.optionObj[osProperties.pkId];
            for (var i = 0; i < options.length; i++) {
                if (value == options[i].value) {
                    return options[i].label;
                }
            }
            return "";
        }
    },
    watch: {
        "propertiesGroups": function (val) {
            if (val) {
                //将时间戳转为日期
                for (var i = 0; i < val.length; i++) {
                    for (var j = 0; j < val[i].osPropertiesDefList.length; j++) {
                        if (val[i].osPropertiesDefList[j].dataType == "date") {
                            if (val[i].osPropertiesDefList[j].propertyValue) {
                                //只读情况下，转时间戳转字符串日期
                                if (!this.readOnly) {
                                    val[i].osPropertiesDefList[j].propertyValue = moment(val[i].osPropertiesDefList[j].propertyValue);
                                } else {
                                    val[i].osPropertiesDefList[j].propertyValue = moment(val[i].osPropertiesDefList[j].propertyValue).format(this.format);
                                }
                            }
                        }
                        if(val[i].osPropertiesDefList[j].ctltype == "radio" || val[i].osPropertiesDefList[j].ctltype == "select"){
                            this.getOptions(val[i].osPropertiesDefList[j]);
                        }
                    }
                }
            }
        }
    }
}
</script>

<style scoped>

</style>